<template>
  <div class="">
    <div class="mb-4 flex-center">
      <div
        :style="{ backgroundColor: selectedColor }"
        class="w-16 h-16 rounded-2xl shadow-md flex-center"
      >
        <p
          v-if="iconText"
          class="text-[24px] m-0 shrink-0 text-white whitespace-nowrap text-center leading-[1.1] text-color-white"
        >
          {{ iconText.slice(0, 2) }}
        </p>
      </div>
    </div>
    <div class="colors grid gap-3 mb-4">
      <button
        v-for="color in predefinedColors"
        :key="color"
        @click="selectedColor = color"
        :style="{ backgroundColor: color }"
        class="w-5 h-5 rounded-full"
      ></button>
      <div class="relative">
        <button
          @click="showColorPicker = !showColorPicker"
          class="w-5 h-5 rounded-full bg-gradient-to-br from-red-500 via-green-500 to-blue-500"
        ></button>
        <el-color-picker
          popper-class="icon-picker"
          class="left-0 top-0 opacity-0 overflow-hidden w-5 h-5 rounded-full"
          style="position: absolute"
          v-model="selectedColor"
          color-format="rgb"
          :teleported="false"
          @active-change="changeColor"
        />
      </div>
    </div>
    <div class="relative">
      <div class="pointer-events-none absolute left-[10px] top-[7px]">
        <i
          class="iconfont text-[20px] text-color-t3 duration-150 icon-biaoti"
        ></i>
      </div>
      <input
        type="text"
        :placeholder="
          $t('message.iconText') + '，' + $t('message.suggestOneOrTow')
        "
        v-model="iconText"
        class="w-full p-3 pl-[40px] bg-input-bg text-sm rounded-lg placeholder-gray-400 text-gray-700 focus:outline-none"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watchEffect } from "vue";
import { ElColorPicker } from "element-plus";
import ColorPicker from "./ColorPicker.vue";

const predefinedColors = [
  "#FFA500",
  "#4CAF50",
  "#00BCD4",
  "#2196F3",
  "#3F51B5",
  "#9C27B0",
  "#E91E63",
  "#F44336",
  "#FF5722",
  "#795548",
  "#9E9E9E",
  "#607D8B",
  "#8BC34A",
  "#CDDC39",
  "#FFEB3B",
  "#FFC107",
  "#FF9800",
  "#9E9E9E",
  "#000000",
];
const selectedColor = ref("#45743B");
const showColorPicker = ref(false);
const iconText = ref("");

const props = defineProps(["bgText", "bgColor"]);
watchEffect(() => {
  selectedColor.value = props.bgColor;
  iconText.value = props.bgText;
});

const changeColor = (val) => {
  selectedColor.value = val;
};

// 有问题，用props来接
const emit = defineEmits(["changeColor", "changeText"]);

watchEffect(() => {
  emit("changeColor", selectedColor.value);
});
watchEffect(() => {
  emit("changeText", iconText.value);
});
</script>

<style scoped lang="scss">
.colors {
  grid-template-columns: repeat(10, 20px);
  justify-content: space-between;
}
.icon-picker {
}
</style>
<style lang="scss">
.icon-picker {
  .el-color-dropdown__btns {
    .el-color-dropdown__value {
      width: 100%;
    }
    button {
      display: none;
    }
  }
}
</style>
